<template>
	<view class="mainpadding">
		<!-- //弹出层 -->
		<u-modal :show="show" :title="title" confirmColor="#DCB490" :content='content' :showCancelButton='true'
			@confirm="qxconfirm" @cancel="show=false"></u-modal>
		<u-modal :show="qrshow" :title="qrtitle" confirmColor="#DCB490" :content='content' :showCancelButton='true'
			@confirm="qrconfirm" @cancel="qrshow=false"></u-modal>
		<view class="flexcenter">
			<!-- tabs分页 -->
			<u-tabs :list="tags" lineColor="#DCB490" :current="current" :activeStyle="{
		    color: '#333333',
		    fontWeight: 'bold',
		    transform: 'scale(1.05)'
		}" :inactiveStyle="{
		            color: '#333333',
					 fontWeight: '400',
		            transform: 'scale(1)'
		        }" itemStyle="padding-left: 20px; padding-right: 20px; height: 34px;" @click="clicktab"></u-tabs>
		</view>
		<view class="placeimage flexcenter" v-if="list.data.length==0">
			<image src="../../static/image/system/placeimage.png" mode=""></image>
		</view>
		<view class="huowubox mainpadding margin_top radius flexbetween" v-for="item in list.data" :key="item.id"
			@click="jumpdetail(item)">
			<view class="tupian radius">
				<image class="radius" :src="item.order_goods[0].image" mode=""></image>
			</view>
			<view class="right">
				<view class="wenben lianghang">
					{{item.order_goods[0].goods_name}}
				</view>
				<view class="wenben jianshu">×{{item.order_goods[0].total_num}}件 </view>
				<view class="jinebox margin_top">
					<view class="qianshu"> 金额：{{item.pay_price}}元</view>
				</view>
				<view class="flexright margin_top">
					<!-- 待发货展示取消订单 -->
					<view class="quxiaanniu" v-if="item.state==1" @click.stop="quxiao(item.id)">取消订单</view>
					<!-- 已发货展示退款，确认收货 -->
					<!-- <view class="quxiaanniu margin_right" v-if="item.state==2" @click.stop="shenqtk(item.id)">退款</view> -->
					<view class="quxiaanniu" v-if="item.state==2" @click.stop="querenshouh(item.id)">确认收货</view>
					<!-- 已收货 -->
					<view class="yishou" v-if="item.state==4">已完成</view>
					<!-- 已退款 -->
					<view class="yishou" v-if="item.state==6">已退款</view>
				</view>
			</view>
		</view>
		<u-popup :show="detailpop" :round="10" mode="center" @close="detailpop = false">
			<view class="popupbox">
				<view class="kddhtext flexcenter">快递单号</view>
				<view class="strongtext flexcenter">{{kuaidi_num}}</view>
				<view class="fuzhi" @click="fuzhibtn">点击复制</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				qrtitle: '是否收到货，点击确认默认收货',
				title: '是否取消订单？',
				show: false,
				qrshow: false,
				current: 0,
				tags: [{
					name: '待发货',
				}, {
					name: '待收货',
				}, {
					name: '已完成'
				}, {
					name: '全部订单'
				}, ],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				order_id: "",
				kuaidi_num: "2374979237895478239459",
				detailpop: false
			}
		},
		computed: {
			state() {
				if (this.current == 0) {
					// 待发货
					return 1
				} else if (this.current == 1) {
					// 待收货
					return 2
				} else if (this.current == 2) {
					// 已完成
					return 4
				} else {
					return ""
				}
			}
		},
		onLoad(options) {
			this.current = options.msg
		},
		onShow() {
			this.init()
		},
		methods: {
			jumpdetail(item) {
				if (item.state == 2) {
					httpRequest.request("/api/order/order_detail", 'POST', {
						order_id: item.id,
					
					}, false, false, true).then(res => {
						this.kuaidi_num = res.data.express_no
						this.detailpop = true
					})
				} else {
					return false
				}
			},
			fuzhibtn(){
				this.detailpop = false
				uni.setClipboardData({
				    data: this.kuaidi_num, // e是你要保存的内容
				    success: function () {
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
				    }
				})
			},
			init(isPage, page) {
				let _this = this
				httpRequest.request("/api/order/lists", 'POST', {
					page: page || 1,
					pagesize: _this.limit,
					state: this.state
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = resList
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			//申请退款
			shenqtk(id) {
				uni.navigateTo({
					url: '/pages/mypage/shenqingtk?id=' + id
				})
			},
			clicktab(e) {
				this.current = e.index
				this.init()
			},
			quxiao(id) {
				this.show = true;
				this.order_id = id
			},
			qxconfirm() {
				this.show = false;
				httpRequest.request("/api/order/cancel", 'POST', {
					order_id: this.order_id
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					this.init()
				})
			},
			//确认收到货
			querenshouh(id) {
				this.order_id = id
				this.qrshow = true;
			},
			qrconfirm() {
				this.qrshow = false;
				httpRequest.request("/api/order/receive", 'POST', {
					order_id: this.order_id
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					this.init()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.placeimage{
		margin-top: 80rpx;
		width: 100%;
		image{
			width: 258rpx;
			height: 278rpx;
		}
	}
	// popup弹出层
	.popupbox{
		padding: 30rpx 0 0;
		width: 600rpx;
	}
	.kddhtext{
		font-size: 36rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
		margin-bottom: 60rpx;
	}
	.fuzhi{
		margin-top: 30rpx;
		border-top: 1rpx solid #DCB490;
		padding: 30rpx 0 0 0;
		text-align: center;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #DCB490;
	}
	
	
	
	
	
	
	.shijian {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.yishou {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #DCB490;
	}

	.lianghang {
		word-break: break-all;
		display: -webkit-box;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-line-clamp: 2; // 设置两行文字溢出
		-webkit-box-orient: vertical;
	}

	.right {
		margin-left: 30rpx;
		width: 66%;
	}

	.jianshu {
		text-align: right;
	}

	.quxiaanniu {
		width: 154rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 57rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #DCB490;
		background: #FFFFFF;
		border-radius: 50rpx;
		border: 2rpx solid #DCB490;
	}

	.qianshu {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FF3939;
	}

	.wenben {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.tupian {
		width: 34%;
		height: 189rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.huowubox {
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(51, 51, 51, 0.1000);
	}
</style>
